<template>
  <div>
      <div class="recommoress">
          <div class="conmin" v-show=" infrad == false ">
                <div class="hader">
                    <span class="iconfont icon-zuoyou1"  @click="$router.push('/recommend')"></span>
                    <input type="text" @click="$router.push('/Search')">
                    <span class="iconfont icon-24gl-plusCircle"></span>
                </div>
                <div class="zhonhnav">
                    <div class="podleft">
                        <van-tabs>
                            <van-tab v-for="(item,index)  in gedanlist.result" :title="item.copywriter + (index+1)" :key="item.id">
                                <div class="tofg" @click="tuiId(item.id)">
                                    <img :src="item.picUrl" alt="">
                                    <div class="tect">
                                        <h3>{{item.name}}</h3>
                                        <span>{{item.playCount|playCountData}}次播放</span>
                                    </div>
                                </div>
                            </van-tab>
                        </van-tabs>
                  </div>
                </div>
                <div class="transmit">
                    <h3 class="hname3">随心听FM</h3>
                    <div class="onzf">
                        <div class="advertis">
                            <div class="img">
                                <img :src="mvlist.result[0].picUrl" alt="">
                                <div class="span">
                                    <span class="iconfont icon-liebiaobofangzhong"></span>
                                </div>
                            </div>
                            <div class="bite">
                                <h3>{{mvlist.result[0].copywriter}}</h3>
                                <div class=btont>
                                    <div class="left">
                                        <span>{{mvlist.result[0].playCount}}万次播放</span>
                                        <span class="namesc">咸友空间</span>
                                    </div>
                                    <div class="right">
                                        <span class="sou">
                                            <span class="iconfont icon-wodesoucang"></span><span>收藏</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btond">
                        <span>
                            每日必听
                        </span>
                    </div>
                    
                </div>
                <!-- //猜你喜欢 -->
                <div class="songrelist">
                    <div class="nav-to">
                        <div class="leftnav">
                            <span class="iconfont icon-liebiaobofangzhong"></span>
                            <span>猜你喜欢</span>
                        </div>
                        <div class="rightnav">
                            <span>兴趣定制</span>
                            <span class="iconfont icon-zuoyou2"></span>
                        </div>
                    </div>
                    <div class="gedelist" >
                        <!-- v-for="(item)in gedanlistas" :key="item.id" -->
                        <div class="lisid" v-for="(item,index) in  gedanlistas" :key="item.id" v-show="index<9" @click="tuiId(item.id)">
                            <div class="img">
                                <img :src="item.al.picUrl" alt="">
                            </div>
                             <p>
                                <!-- <span class="con">超10万收藏</span> -->
                                <span>{{item.name}}</span>
                             </p>
                        </div>
                    </div>
                </div>
               
          </div>
           <div class="podlist" v-show="infrad==true">
                <h3>
                    <div>
                          <span class="iconfont icon-zuoyou1" @click="infrad=false"></span>
                          &nbsp;<span class="te">歌单详情</span>
                    </div>
                   
                </h3>
                <ol>
                    <!-- <i class="iconfont icon-24gf-play"></i> &nbsp;<span>播放全部</span> <span>(共{{gedanlistas.legth}}首)</span> -->
                    <li v-for="(item,index) in gedanlistas" :key="item.id" v-show="index<10" @click="songidid(item.id)">
                        <div class="podlistleft" >
                            <!-- v-for="(lel) in item.al" :key="lel.id" v-for="gedanlistas"-->
                            <img :src="item.al.picUrl" alt="">
                        </div>
                        <div class="podlistright">
                            <h3>{{item.name}}</h3>
                            <p v-for="(le,i) in item.ar" :key="i" v-show="i<1">{{le.name}}</p>
                            <!-- <p><i class="iconfont icon-icon_zuoyoujiantou"></i><span></span>&nbsp;<i class="iconfont icon-24gf-play"></i><span>544万</span></p> -->
                        </div>
                    </li>
                </ol>
           </div>
      </div>
  </div>
</template>

<script>


import {getplaydetail,gethigqu,gettotomv,getsongs} from '../../api/moress'

export default {
    data(){
        return{
            gedanlist:null,//歌单
            geadnid:null,
            gedanlistas:null,//热门歌单
            mvlist:null,//mv
            inidlist:5001,//热门歌单id
            infrad:false,
            tuid:null,//歌单id
            songid:null,//歌曲id
            
        }
    },
    methods:{
        getjingpin(){
            // //热门歌单
            // getperson().then(data=>{
            //     console.log("热门",data)
            // })
            //歌单详情
            getplaydetail({id:5001}).then(data=>{
                // console.log("歌单详情",data)
                  this.gedanlistas=data.playlist.tracks;
            })
            gethigqu().then(data=>{
                //  console.log("歌单",data)
                 this.gedanlist=data
            })
            // getjing().then(data=>{
            //     console.log("相关",data)
            // })

            
        },

        //mv
        getmavc(){
            gettotomv().then(data=>{
                // console.log("mv",data)
                this.mvlist=data
            })
        },
        //获取歌单详情
        getxianqing(){
             //歌单详情
            getplaydetail({id:this.tuid}).then(data=>{
                // console.log("歌单详情",data);
                  this.gedanlistas=data.playlist.tracks;
            })
        },
        //获取歌曲url
        getsongtmics(){
            getsongs({id:this.songid}).then(data=>{
                 console.log("歌曲",data);
            })    
        },
        //歌单
        tuiId(id){
            this.tuid = id;
            this.infrad=true
            this.getxianqing()
        },
        //歌曲
        songidid(id){
            this.songid=id
            this. getsongtmics();
            this.$emit("get-player-id",id)
            this.$emit("get-play-all-id",this.$route.query.id);//传递di
        },
        
    },
    created(){
        this.getjingpin();
        this.getmavc();//mv
    },
    mounted(){
    },
    filters:{
        playCountData(value){
        let w = value >10000? value /10000:value ;
        let y = w >10000?parseInt(value/10000) +"亿" : parseInt(w) + "万"
        return y
        }
   },
}
</script>

<style lang="less">
 .recommoress{
     width: 100%;
     height: 100%;
     padding: 10px;
     background-color: #f5f5f5;
     box-sizing:border-box;
     .conmin{
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            .hader{
                margin-top: 2px;
                width: 100%;
                height: 40px;
                display: flex;
                .iconfont{
                    width: 40px;
                    height: 100%;
                    font-size: 20px;
                    text-align:center;
                    line-height: 40px;
                }
                input{
                    margin-top: 2px;
                    width: 80%;
                    height: 96%;
                    outline:none;
                    color: #f2f3f4;
                    // border:0px;
                    border:0;
                    border-bottom:1px solid #f9eeee;
                }
            }
            .zhonhnav{
                margin-top: 20px;
                width: 100%;
                height: 160px;
                // overflow: hidden;
                box-sizing: border-box;
                padding-left: 10px;
                padding-right: 10px;
                // .swiper-container {
                //     width: 100%;
                //     height: 100%;
                // }  
                .tofg{
                    width: 100%;
                    height:100px;
                    padding: 10px;
                    box-sizing: border-box;
                    display: flex;
                    img{
                        height:100%;
                        // width: ;
                        border-radius: 10px;
                    }
                    .tect{
                        padding: 10px;
                        box-sizing: border-box;
                        width: 80%;
                        height: 100%;
                        color: #7e7e7e;
                        overflow: hidden;
                        h3{
                            width: 100%;
                            height: 24px;
                            font-size: 16px;
                            overflow: hidden;
                            margin-bottom: 10px;
                            
                        }
                        span{
                            display: block;
                            font-size: 12px;
                        }
                    }
                }
                
                
            }
            .transmit{
                width: 100%;
                height: 210px;
                padding: 10px;
                box-sizing:border-box;
                // padding-bottom: 10px;
                background-color: #d3d9df;
                .hname3{
                    width: 100%;
                    height: 20px;
                    text-align: center;
                    font-size: 16px;
                    font-weight: 400;
                    color: #c3cacf;
                }
                .onzf{
                    width: 100%;
                    height: 90px;
                    margin-top: 25px;
                    margin-bottom: 10px;
                    .advertis{
                        width: 100%;
                        margin: auto;
                        border-radius: 10px;
                        height: 90px;
                        background-color: #e6ebef;
                        padding: 10px;
                        box-sizing: border-box;
                        display: flex;
                        
                         .img{
                             height: 70px;
                             width: 70px;
                             border-radius: 10px;
                             position: relative;
                             //border:1px solid red;
                             overflow: hidden;
                             img{
                                 border-radius: 10px;
                                 width: 100%;
                                 height: 100%;
                             }
                             .span{
                                width: 30px;
                                height: 30px;
                                background-color: #e5f3fa;
                                text-align: center;
                                line-height: 30px;
                                border-radius: 50%;
                                opacity: .6;
                                position: absolute;
                                bottom: 5px;
                                right: 5px;
                             }
                         }
                         .bite{
                             padding-left: 10px;
                             box-sizing: border-box;
                             width: 77%;
                             height: 100%;
                             h3{
                                 width: 100%;
                                 height: 28%;
                                 font-size: 14px;
                                 color:black;
                                 font-size: 400;
                                 overflow: hidden;
                             }
                             .btont{
                                 width: 100%;
                                 height: 65%;
                                 display: flex;
                                 .left{
                                     width: 70%;
                                     height: 100%;
                                     color: #d5dadf;
                                     span{
                                         margin-top: 5px;
                                         margin-bottom: 5px;
                                         display: block;
                                         font-size: 14px;
                                        //  font-weight:570;
                                         &.namesc{
                                            font-size: 16px;
                                            // font-weight: 700;
                                         }
                                     }
                                 }
                                 .right{
                                     color: #d5dadf;
                                     width: 30%;
                                     
                                     font-size: 14px;
                                     position: relative;
                                     span.sou{
                                        position: absolute;
                                        padding: 3px;
                                        bottom: 0;
                                        right: 0;
                                        box-sizing: border-box;
                                        border: 1px solid #d5dadf ;
                                        border-radius: 10px;
                                     }
                                    //  height: 100%;
                                 }
                             }
                         }
                    }
                }
                .btond{
                    span{
                        display: block;
                        margin-top: 10px;
                        width: 100%;
                        height: 30px;
                        text-align: center;
                        font-size: 20px;
                        color: #b5bdc2;
                    }
                    .itemcontr{
                        .itemcon01{
                            height: 20px;
                            span{
                                font-size: 14px;
                            }
                        }
                    }
                }
               
               
            }
            .songrelist{
                margin-top: 20px;
                width: 100%;
                padding: 10px;
                box-sizing: border-box;
                .nav-to{
                    width: 100%;
                    height: 30px;
                    display: flex;
                    margin-bottom: 10px;
                    justify-content: space-between;
                    .leftnav{
                        font-size: 18px;
                        color: #434343;
                    }
                    .rightnav{
                        margin-top: 3px;
                        padding: 3px;
                        box-sizing: border-box;
                        font-size: 12px;
                        height: 25px;
                        border: 1px solid #7e7e7e;
                        border-radius: 20px;
                        color:#7e7e7e ;
                        .iconfont{
                             font-size: 10px;
                        }
                    }
                }
                .gedelist{
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    .lisid{
                        width: 30%;
                        height: 150px;
                        // position: relative;
                        .img{
                            border-radius: 10px;
                            width: 100%;
                            height: 105px;
                            img{
                                height: 105px;
                                border-radius: 10px;
                            }
                        }
                        p{
                            width: 100%;
                            font-size: 10px;
                            span{
                                &.con{
                                    color:#f2b99a ;
                                }
                            }
                        }
                    }
                }
            }
     }
      .podlist{
        //   margin-top: 10px;
          background-color: #fff;
          width: 100%;
          height: 100%;
          padding: 10px;
          box-sizing: border-box;
          h3{
             width: 100%;
             height: 40px;
             font-size: 16px;
            //  color: red;
             div{
                 line-height: 30px;
                 position: fixed;
                  font-size: 16px;
                  line-height: 40px;
                 top: 0px;
                 left: 0px;
                 width: 100%;
                 padding-left: 10px;
                 padding-right: 10px;
                 box-sizing: border-box;
                 height: 40px;
                 background-color: rgb(201, 200, 198);
                //  width: ;
                span{
                    &.te{
                        // color: rgb(157, 172, 172);
                        color: black;
                    }
                }
             }
          }
          ol{
              width: 100%;
            //    margin-top: 10px;
               i{
                   width: 100%;
                   height: 25px;
                   font-size: 14px;
                   color: #dedede;
                   &.iconfont{
                       padding: 2px;
                       text-align: center;
                       border: 1px solid black;
                       border-radius: 50%;
                       
                   }
               }
              li{
                    width: 100%;
                    height: 70px;
                    // margin-top: 10px;
                    // margin-bottom: 10px;
                    padding: 10px;box-sizing: border-box;
                    border-bottom: 1px solid #989899;
                    display: flex;
                    box-sizing: border-box;
                   .podlistleft{
                        width: 50px;
                        height: 50px;
                        border-radius: 10px;
                        img{
                            width: 100%;
                            border-radius: 10px;
                        }
                   }
                   .podlistright{
                       width: 80%;
                      height: 100%;
                      padding: 10px;
                      box-sizing:border-box;
                      h3{
                          font-size: 16px;
                          height: 25px;
                          overflow: hidden;
                          font-weight: 400;
                        //   color:#dedede ;
                        color: black;
                      }
                      p{
                          color: #dedede;
                          font-size: 10px;
                          &.te{
                            color: #a3a2a2;
                            font-size: 16px;
                             overflow: hidden;
                            height: 20px;
                          }
                      }
                   }
              }
          }
        
      }
  
 }


</style>